<template>
  <el-container>
    <el-header class="header">
      <heads>会员列表</heads>
    </el-header>
    <el-main class="mainBox">
      <div class="bgc">
        <div class="headerBox">
          <span>编辑资料</span><el-button @click="returnTwo">返回</el-button>
        </div>
        <div class="formBox">
          <el-form :model="form" label-width="120px">
            <el-form-item label="姓名">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="会员等级">
              <el-select
                v-model="form.region"
                placeholder="please select your zone"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item label="Instant delivery">
              <el-switch v-model="form.delivery" />
            </el-form-item>
            <el-form-item label="性别">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="男" name="type" />
                <el-checkbox label="女" name="type" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="微信号">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="生日">
              <el-col :span="11">
                <el-date-picker
                  v-model="form.date1"
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="身份证">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="身高">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="体重">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="个性签名">
              <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import router from "../../router";
import heads from "./HeaderView.vue";
// import headerTwo from "./headerTwoView.vue";
import { reactive, toRefs, ref } from "vue";
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
  router.push("/mainView/ListMembers/listMembersView");
};
const returnTwo: any = function () {
  router.push("/mainView/ListMembers/listMembersView");
};
</script>

<style scoped>
.header {
  padding: 0;
  margin-top: 20px;
}
.mainBox {
  width: 100%;
  padding: 50px 20px;
  background-color: #f2f2f2;
}
.bgc {
  width: 100%;

  padding: 10px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.headerBox {
  width: 96%;
  height: 60px;
  background-color: #f3f3f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.formBox {
  width: 40%;
  margin-top: 20px;
}
</style>
